<template>
  <!-- 咨询模块 -->
  <view :style="colorStyle">
    <view class="newsList">
      <view class="title"></view>
      <view class="swiper" v-if="imgUrls.length > 0">
        <swiper
          indicator-dots="true"
          :autoplay="autoplay"
          :circular="circular"
          :interval="interval"
          :duration="duration"
          indicator-color="rgba(255,255,255,0.1)"
          indicator-active-color="#fff"
        >
          <block v-for="(item, index) in imgUrls" :key="index">
            <swiper-item>
              <navigator :url="'/pages/extension/news_details/index?id=' + item.id">
                <image :src="item.image_input[0]" class="slide-image" />
              </navigator>
            </swiper-item>
          </block>
        </swiper>
      </view>

      <view class="num-wrapper">
        <view class="num-item">
          <view class="num">{{ indexData.httpData.intermediary || 0 }}<text>个</text></view>
          <view class="txt">已签约中介</view>
        </view>
        <view class="num-item">
          <view class="num">{{ indexData.httpData.landlord || 0 }}<text>家</text></view>
          <view class="txt">已签约房东</view>
        </view>
        <view class="num-item">
          <view class="num">{{ numberToChinese(indexData.httpData.signed_area) || 0 }}<text>㎡</text></view>
          <view class="txt">已签约面积</view>
        </view>
        <view class="num-item">
          <view class="num">{{ indexData.httpData.users || 0 }}<text>人</text></view>
          <view class="txt">平台用户数</view>
        </view>
      </view>
      <!-- <view class="aaa">{{ poiList.province + '-' + poiList.city + '***' + poiText }} </view> -->
      <view class="nav" v-if="navList.length > 0">
        <scroll-view class="scroll-view_x" scroll-x scroll-with-animation :scroll-left="scrollLeft" style="width: auto; overflow: hidden">
          <block v-for="(item, index) in navList" :key="index">
            <view class="item" :class="active == item.id ? 'on' : ''" @click="tabSelect(item.id, index)" :id="`news_${item.id}`">
              <view>{{ item.title }}</view>
              <view class="line bg-color" v-if="active == item.id"></view>
            </view>
          </block>
        </scroll-view>
      </view>
      <view class="list">
        <block v-for="(item, index) in articleList" :key="index">
          <navigator :url="'/pages/extension/news_details/index?id=' + item.id" hover-class="none" class="item acea-row row-between-wrapper" v-if="item.image_input.length == 1">
            <view class="text acea-row row-column-between">
              <view class="name line2">{{ item.title }}</view>
              <view>{{ item.add_time }}</view>
            </view>
            <view class="pictrue">
              <image :src="item.image_input[0]"></image>
            </view>
          </navigator>
          <navigator :url="'/pages/extension/news_details/index?id=' + item.id" hover-class="none" class="item" v-else-if="item.image_input.length == 2">
            <view class="title line1">{{ item.title }}</view>
            <view class="picList acea-row row-between-wrapper">
              <block v-for="(itemImg, indexImg) in item.image_input" :key="indexImg">
                <view class="pictrue">
                  <image :src="itemImg"></image>
                </view>
              </block>
            </view>
            <view class="time">{{ item.add_time }}</view>
          </navigator>
          <navigator :url="'/pages/extension/news_details/index?id=' + item.id" hover-class="none" class="item" v-else-if="item.image_input.length > 2">
            <view class="title line1">{{ item.title }}</view>
            <view class="picList on acea-row row-between-wrapper">
              <block v-for="(itemImg, indexImg) in item.image_input" :key="indexImg">
                <view class="pictrue">
                  <image :src="itemImg"></image>
                </view>
              </block>
            </view>
            <view class="time">{{ item.add_time }}</view>
          </navigator>
        </block>
      </view>
    </view>
    <view class="noCommodity" v-if="articleList.length == 0 && (page != 1 || active == 0)">
      <view class="emptyBox">
        <image :src="imgHost + '/statics/images/empty-box.png'"></image>
        <view class="tips">暂无新闻信息~</view>
      </view>
    </view>
    <pageFooter :style="colorStyle"></pageFooter>
  </view>
</template>

<script>
const app = getApp()
import { getIndexData } from '@/api/api.js'
import { getArticleCategoryList, getArticleList, getArticleHotList, getArticleBannerList } from '@/api/api.js'
import colors from '@/mixins/color'
import { HTTP_REQUEST_URL } from '@/config/app'
import pageFooter from '@/components/pageFooter/index.vue'
// import { JSONToGet } from '@/utils/jsonp.js'
export default {
  components: {
    pageFooter
  },
  mixins: [colors],
  data() {
    return {
      imgUrls: [],
      articleList: [],
      indicatorDots: false,
      circular: true,
      autoplay: true,
      interval: 3000,
      duration: 500,
      navList: [],
      active: 0,
      page: 1,
      limit: 8,
      status: false,
      scrollLeft: 0,
      indexData: {
        httpData: {
          intermediary: 0,
          landlord: 0,
          signed_area: 0,
          users: 0
        }
      },
      orderList: [], // 确保在这里声明
      imgHost: HTTP_REQUEST_URL,
      addressId: {
        show: false,
        province: '',
        city: '',
        text: '',
        columns: [],
        defaultIndex: []
      },
      poiList: {},
      poiText: ''
    }
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    uni.removeStorageSync('form_type_cart')
    this.getIndex()
  },
  onLoad() {
    this.getArticleHot()
    this.getArticleBanner()
    this.getArticleCate()
    this.status = false
    this.page = 1
    this.articleList = []
    this.getCidArticle()
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.getCidArticle()
  },
  methods: {
    numberToChinese: function (num) {
      if (num < 10000) {
        return num.toString()
      } else if (num >= 10000 && num < 100000000) {
        return (num / 10000).toFixed(num % 10000 === 0 ? 0 : 2) + '万'
      } else if (num >= 100000000) {
        return (num / 100000000).toFixed(num % 100000000 === 0 ? 0 : 2) + '亿'
      }
    },
    // getIndex: function () {
    //   let that = this
    //   getIndexData()
    //     .then((res) => {
    //       that.$set(that, 'indexData', res.data)
    //       that.$set(that, 'orderList', res.data.integralList)
    //       console.log('统计信息>>>>', res.data)
    //     })
    //     .catch((msg) => {
    //       console.log('>>>>', msg)
    //     })
    // },
    getIndex: function () {
      let that = this
      getIndexData()
        .then((res) => {
          that.indexData = { ...that.indexData, ...res.data } // 只合并已声明的属性
          if (res.data && res.data.integralList) {
            that.orderList = res.data.integralList
          }
          console.log('统计信息>>>>', res.data)
        })
        .catch((msg) => {
          console.log('>>>>', msg)
        })
    },
    getArticleHot: function () {
      let that = this
      getArticleHotList().then((res) => {
        that.$set(that, 'articleList', res.data)
      })
    },
    getArticleBanner: function () {
      let that = this
      getArticleBannerList().then((res) => {
        that.imgUrls = res.data
      })
    },
    getCidArticle: function () {
      let that = this
      if (that.active == 0) return
      let limit = that.limit
      let page = that.page
      let articleList = that.articleList
      if (that.status) return
      getArticleList(that.active, {
        page: page,
        limit: limit
      }).then((res) => {
        let articleListNew = []
        let len = res.length
        articleListNew = articleList.concat(res.data)
        that.page++
        that.$set(that, 'articleList', articleListNew)
        that.status = limit > len
        that.page = that.page
      })
    },
    getArticleCate: function () {
      let that = this
      getArticleCategoryList().then((res) => {
        that.$set(that, 'navList', res.data)
      })
    },
    tabSelect(active, e) {
      this.active = active
      this.scrollLeft = e * 60
      //	this.scrollLeft = (active - 1) * 50;
      if (this.active == 0) this.getArticleHot()
      else {
        this.$set(this, 'articleList', [])
        this.page = 1
        this.status = false
        this.getCidArticle()
      }
    }
  }
}
</script>

<style lang="scss">
.noCommodity {
  border-top-width: 0;
  .emptyBox {
    text-align: center;
    margin-top: 40rpx;
    .tips {
      color: #aaa;
      font-size: 26rpx;
      margin-top: 60rpx;
    }
    image {
      width: 414rpx;
      height: 240rpx;
    }
  }
}
page {
  background-color: #fff !important;
}

.newsList {
  padding-bottom: 120rpx;
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin: 20rpx 30rpx 0;
    height: 50rpx; /* 调整高度 */
    background-image: url('../../static/logo-row.png');
    background-size: contain; /* 调整图片大小 */
    background-position: left center; /* 定位图片在左侧居中 */
    background-repeat: no-repeat; /* 防止图片重复 */
  }
  .num-wrapper {
    z-index: 29;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    margin: 30rpx;
    border-radius: 16rpx;
    height: 160rpx;
    background-image: linear-gradient(45deg, var(--view-theme), var(--view-bntColor), var(--view-theme), var(--view-bntColor), var(--view-theme));
    background-size: 400%;
    animation: bganimation 15s infinite;
    @keyframes bganimation {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    &.on {
      height: 128rpx;
      margin-top: -68rpx;
      .gift {
        color: var(--view-theme);
        margin-left: 10rpx;
        font-weight: bold;
      }
    }

    .img {
      margin-left: 38rpx;
      width: 76rpx;
      height: 68rpx;
    }

    .text {
      font-size: 28rpx;
      font-weight: 400;
      color: #ffffff;
      margin-left: -60rpx;
    }

    .btn-login {
      width: 144rpx;
      height: 56rpx;
      background-color: var(--view-theme);
      border-radius: 28rpx;
      text-align: center;
      line-height: 56rpx;
      margin-right: 32rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #ffffff;
    }

    .num-item {
      width: 33.33%;
      text-align: center;
      .num {
        font-size: 32rpx;
        font-weight: bold;
        text {
          font-size: 24rpx;
          margin-left: 10rpx;
        }
      }
      .txt {
        margin-top: 8rpx;
        font-size: 26rpx;
        color: #ffffff;
      }
    }
  }
}

.newsList .swiper {
  width: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 0 30rpx;
}

.newsList .swiper swiper {
  width: 100%;
  height: 355rpx;
  padding-top: 20rpx;
  position: relative;
  box-sizing: border-box;
}

.newsList .swiper .slide-image {
  width: 100%;
  height: 330rpx;
  border-radius: 6rpx;
}
// #ifdef APP-PLUS || H5
.newsList /deep/uni-swiper .uni-swiper-dots-horizontal {
  bottom: 50rpx;
}

.newsList .swiper /deep/.uni-swiper-dot ~ .uni-swiper-dot {
  margin-left: 5rpx;
}
// #endif
// #ifdef MP
.newsList /deep/wx-swiper .wx-swiper-dots-horizontal {
  bottom: 50rpx;
}

.newsList .swiper /deep/.wx-swiper-dot ~ .wx-swiper-dot {
  margin-left: 5rpx;
}
// #endif
.newsList .nav {
  padding: 0 30rpx;
  width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
  margin-top: 43rpx;
}

.newsList .nav .item {
  display: inline-block;
  font-size: 32rpx;
  color: #999;
}

.newsList .nav .item.on {
  color: #282828;
}

.newsList .nav .item ~ .item {
  margin-left: 46rpx;
}

.newsList .nav .item .line {
  width: 24rpx;
  height: 4rpx;
  border-radius: 2rpx;
  margin: 10rpx auto 0 auto;
}

// .newsList .list {
//   padding-bottom: calc(constant(safe-area-inset-bottom));
// }

.newsList .list .item {
  margin: 0 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  padding: 35rpx 0;
}

.newsList .list .item .pictrue {
  width: 250rpx;
  height: 156rpx;
}

.newsList .list .item .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 6rpx;
}

.newsList .list .item .text {
  width: 420rpx;
  height: 156rpx;
  font-size: 24rpx;
  color: #999;
}

.newsList .list .item .text .name {
  font-size: 30rpx;
  color: #282828;
}

.newsList .list .item .picList .pictrue {
  width: 335rpx;
  height: 210rpx;
  margin-top: 30rpx;
}

.newsList .list .item .picList.on .pictrue {
  width: 217rpx;
  height: 136rpx;
}

.newsList .list .item .picList .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 6rpx;
}

.newsList .list .item .time {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 22rpx;
}
</style>
